<template>
  <div>
    <!-- 提示条 -->
    <el-alert type="info" :closable="false" show-icon>
      <slot> 数据一共 {{ counts }} 条 </slot>
    </el-alert>
    <!-- 试题列表 -->
    <el-table :data="formData" style="width: 100%">
      <el-table-column prop="number" label="试题编号" min-width="120">
      </el-table-column>
      <el-table-column prop="subject" label="学科" min-width="90">
      </el-table-column>
      <el-table-column prop="catalog" label="目录" min-width="90">
      </el-table-column>
      <el-table-column label="题型" min-width="90">
        <template slot-scope="{ row }">
          {{ row.questionType | formatQuestionType }}
        </template>
      </el-table-column>
      <el-table-column label="题干" min-width="250">
        <template slot-scope="{ row }">
          {{ row.question | html2Text }}
        </template>
      </el-table-column>
      <el-table-column label="录入时间" min-width="160">
        <template slot-scope="{ row }">
          {{ row.addDate | parseTimeByString }}
        </template>
      </el-table-column>
      <el-table-column prop="difficulty" label="难度" min-width="90">
        <template slot-scope="{ row }">
          {{ row.difficulty | formatDifficulty }}
        </template>
      </el-table-column>
      <el-table-column prop="creator" label="录入人" min-width="90">
      </el-table-column>
      <el-table-column label="操作" min-width="180">
        <template slot-scope="{ row }">
          <el-button
            type="warning"
            icon="el-icon-view"
            size="small"
            title="预览"
            circle
            plain
            @click="detail(row.id)"
          ></el-button>
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="small"
            title="修改"
            circle
            plain
            @click="$router.push(`new?id=${row.id}`)"
          ></el-button
          ><el-button
            type="danger"
            icon="el-icon-delete"
            size="small"
            title="删除"
            circle
            plain
            @click="remove(row.id)"
          ></el-button>
          <el-button
            type="success"
            icon="el-icon-check"
            size="small"
            title="加入精选"
            circle
            plain
            @click="choiceAdd(row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 页码 -->
    <div class="pageBox">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="params.page"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="params.pagesize"
        layout="prev, pager, next, sizes, jumper"
        :total="counts"
      >
      </el-pagination>
    </div>
    <!-- 预览弹窗 -->
    <el-dialog :visible.sync="showDialog" title="题目预览" width="900px">
      <el-row>
        <el-col :span="6">
          【题型】：{{ showData.questionType | formatQuestionType }}
        </el-col>
        <el-col :span="6"> 【编号】: {{ showData.id }} </el-col>
        <el-col :span="6">
          【难度】：{{ showData.difficulty | formatDifficulty }}
        </el-col>
        <el-col :span="6"> 【标签】：{{ showData.tags }} </el-col>
      </el-row>
      <el-row>
        <el-col :span="6"> 【学科】：{{ showData.subjectName }} </el-col>
        <el-col :span="6"> 【目录】: {{ showData.directoryName }} </el-col>
        <el-col :span="6"> 【方向】：{{ showData.direction }} </el-col>
      </el-row>
      <hr />
      <div style=" margin-bottom:16px">【题干】：</div>
      <div style=" color:#00f; margin-bottom:16px">
        {{ showData.question | html2Text }}
      </div>
      <div style=" margin-bottom:16px" v-if="showData.questionType != 3">
        {{ showData.questionType | formatQuestionType }}
        选项：（以下选中的选项为正确答案）
      </div>
      <!-- 单选框 -->
      <el-radio-group v-model="radioRight" v-if="showData.questionType == 1">
        <el-radio
          v-for="item in showData.options"
          :label="item.isRight"
          :input="radioChange(radioRight)"
          style="display:block; margin-bottom:16px"
        >
          {{ item.title }}
        </el-radio>
      </el-radio-group>
      <!-- 多选 -->
      <el-checkbox-group
        v-model="checkboxRight"
        v-if="showData.questionType == 2"
      >
        <el-checkbox
          v-for="item in showData.options"
          :label="item.isRight"
          :input="radioChange(checkboxRight)"
          style="display:block; margin-bottom:16px"
        >
          {{ item.title }}
        </el-checkbox>
      </el-checkbox-group>
      <hr />
      <div>
        【参考答案】：
        <el-button type="danger" @click="showVideo = ''"
          >视频答案预览</el-button
        >
      </div>
      <video
        :src="showData.videoURL"
        controls
        width="400"
        height="250"
        :style="showVideo"
      ></video>
      <hr />
      <div style="margin: 25px 0">
        【答案解析】：{{ showData.answer | html2Text }}
      </div>
      <hr />
      <div>【题目备注】：{{ showData.remarks }}</div>
      <template slot="footer">
        <el-row type="flex" justify="end">
          <el-button type="primary" @click="showDialog = false">关闭</el-button>
        </el-row>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { list, detail, choiceAdd, remove } from "@/api/hmmm/questions";

export default {
  data() {
    return {
      formData: [],
      counts: 0,
      params: {
        page: 1,
        pagesize: 5,
      },
      radioRight: 1,
      checkboxRight: [1],
      showDialog: false,
      showData: [],
      showVideo: "display:none",
    };
  },
  created() {
    this.list();
  },
  methods: {
    async list(val = 5) {
      if (this.formData.length === 1 && this.params.page > 1) {
        this.params.page--;
      }
      const res = await list({ ...this.params, pagesize: val });
      // console.log(res);
      this.counts = res.data.counts;
      this.formData = res.data.items;
    },
    handleCurrentChange() {
      this.list();
    },
    handleSizeChange(val) {
      this.list(val);
    },
    async detail(id) {
      // console.log(id);
      const res = await detail({ id: id });
      // console.log(res);
      this.showData = res.data;
      this.showDialog = true;
    },
    async getSearchList(data) {
      // console.log(id);
      const res = await list({ ...data, ...this.params });
      this.counts = res.data.counts;
      this.formData = res.data.items;
    },
    radioChange(val) {
      if (!val) this.radioRight = 1;
      // console.log(val);
      if (val.length !== 1) this.checkboxRight = [1];
    },
    async choiceAdd(id) {
      await this.$confirm("确认加入精选?", "提示", {
        type: "info",
      });
      await choiceAdd({ id: id, choiceState: 1 });
      this.$message({
        type: "success",
        message: "添加成功!",
      });
      this.list();
    },
    async remove(id) {
      await this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        type: "warning",
      });
      // console.log(1);
      await remove({ id: id });
      this.$message({
        type: "success",
        message: "删除成功!",
      });
      this.list();
    },
    // async edit(id) {
    //   // console.log(id);
    //   this.$router.push(`new?id=${id}`);
    //   // this.$router.push(`new/${id}`);
    // },
  },
  filters: {
    formatQuestionType(value) {
      if (value == 1) {
        return "单选";
      } else if (value == 2) {
        return "多选";
      } else if (value == 3) {
        return "简答";
      } else {
        return "未知";
      }
    },
    formatDifficulty(value) {
      if (value == 1) {
        return "简单";
      } else if (value == 2) {
        return "一般";
      } else if (value == 3) {
        return "困难";
      } else {
        return "未知";
      }
    },
  },
};
</script>

<style scoped lang="scss">
.el-alert {
  margin-bottom: 15px;
}
.pageBox {
  margin-top: 20px;
  text-align: right;
}
::v-deep .el-alert__icon {
  font-size: 16px;
  width: 16px;
}
.question-container {
  padding: 10px;
}
.el-alert {
  margin-bottom: 15px;
}
.el-dialog {
  .el-col {
    margin-bottom: 20px;
  }
}
</style>
